<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复合选择器</title>
  <style>
    /*复合选择器：主要是为了增加选择器的优先级*/
     /*1. 后代选择器: 选择指定元素的后代元素*/
    li span{
      color: orange;
    }
    /*2. 交集选择器*/
    .s{
      text-decoration: underline;
    }
    span.s{
      text-decoration: none;
    }
    /*3. 并集选择器：一次可以选择多个页面元素(中间使用逗号分隔开)*/
    .a,.o{
      font-weight: bolder;
    }
    /*4. 伪类选择器*/
    li:hover{
      background-color: #ffaf9c;
      cursor: pointer;
    }
  </style>
</head>
<body>
<ul>
  <li class="a">苹果</li>
  <li><span class="s">香蕉</span></li>
  <li class="o">桔子</li>
  <li>菠萝</li>
</ul>
</body>
</html>
